<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<style>
    .el-input-item {
        width: 260px;
    }

</style>
<div id="app">
    <template>
        <el-form :model="formData" ref="formData" :rules="rules" label-width="100px"
                 style="margin-top: 5%;display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;justify-content: space-between;margin-right: 5%">

            <el-form-item label="请假类型">
                <el-select v-model="formData.type" placeholder="请选择请假类型" class="el-input-item"
                           size="small" disabled="true">
                    <el-option
                            v-for="dict in typeOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="标题" prop="title">
                <el-input class="el-input-item" size="small" v-model="formData.title"
                          placeholder="请输入标题" disabled="true"/>
            </el-form-item>
            <el-form-item label="原因" prop="reason">
                <el-input class="el-input-item" size="small" v-model="formData.reason" type="textarea"
                          placeholder="请输入内容" disabled/>
            </el-form-item>

            <el-form-item label="开始时间" prop="startTime">
                <el-date-picker clearable size="small" style="width: 260px"
                                v-model="formData.startTime"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择开始时间" disabled>
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
                <el-date-picker clearable size="small" style="width: 260px"
                                v-model="formData.endTime"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择结束时间" disabled>
                </el-date-picker>
            </el-form-item>

            <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between">
                <div>
                    <el-form-item label="是否通过" prop="title">
                        <el-select v-model="approveForm.opinionType" placeholder="请选择" size="small"
                                   style="width: 260px">
                            <el-option label="通过" value="1"></el-option>
                            <el-option label="拒绝" value="2"></el-option>
                        </el-select>
                    </el-form-item>

                </div>
                <div style="margin-left: 10%">
                    <el-form-item label="审批意见" prop="opinionContent">
                        <el-input class="el-input-item" size="small" v-model="approveForm.opinionContent" type="textarea"
                                  placeholder="请输入审批意见"/>
                    </el-form-item>
                </div>
            </div>


        </el-form>
        <div style="text-align: center;margin-top: 5%">
            <el-button size="small" @click="closePage">取 消</el-button>
            <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
        </div>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/api/admin/bizLeave.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<script>
    let id = getQueryString("id");
    let source = getQueryString("source");
    let proInstanceId = getQueryString("proInstanceId");
    let taskId = getQueryString("taskId");
    new Vue({
        el: '#app',
        data() {
            return {
                dialogVisible: false,
                formData: {},
                source: source,
                // 请假类型字典
                typeOptions: [],
                approveForm: {},
                rules: {
                    createTime: [
                        {required: true, message: "创建时间不能为空", trigger: "blur"}
                    ],
                    updateTime: [
                        {required: true, message: "修改时间不能为空", trigger: "blur"}
                    ]
                }
            }
        },
        created() {
            if (id) {
                detail(id).then((res) => {
                    if (res.code === '200') {
                        this.formData = res.data
                    }
                });
            } else {
                this.formData = {}
            }
            getDicts("leave_type").then(response => {
                this.typeOptions = response.data;
            });

        },
        methods: {


            handleSubmit() {
                let params = this.approveForm
                params.instanceId = proInstanceId
                params.businessKey = id
                params.taskId = taskId
                requests.post("/admin/bizLeave/submitApprove", params).then(res => {
                    if (res.code === '200') {
                        this.$notify({
                            title: '成功',
                            message: '操作成功',
                            type: 'success'
                        });
                    }
                    let index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);

                })
            },

        }
    });
</script>
</html>
